<template>
  <view class="qrcode-page">
    <!-- 头部导航栏 -->
    <my-navbar leftText="二维码信息"  :custom="false" bgColor="#ffffff" :autoBack="false"
    					leftIconSize="40" />

    <!-- 内容区域 -->
    <view class="content">
      <!-- 头像和名称（示例） -->
      <view class="user-info">
        <image class="avatar" :src="venueDetailMsg.bigImageList[0].imageurl" mode="widthFix"></image>
        <text class="username">群名:{{venueDetailMsg.eventtitle}}</text>
      </view>

	  <view v-for="(item, index) in venueDetailMsg.qrcodeImageList" :key="index">
	
		  	<view class="qrcode-item">
		  		<image class="qrcode-img" :src="item.imageurl" mode="widthFix"></image>
		  		<text class="qrcode-label">{{item.imagedesc}}</text>
				<text class="group-info">申请入群备注好具体信息</text>
				<text class="group-info">说明:扫码加好友</text>
		  	</view>

	  </view>
		

      
	</view>
	<view class="btn-item">
	  <!-- 保存图片按钮 -->
	  <button class="save-btn" @click="saveAllQrcodes">保存图片</button>
	  <!-- 保存图片按钮 -->
	  <button class="close-btn" @click="closedQrcode">完成关闭</button>
	</view>
  </view>
</template>
<script>
export default {
	data() {
		return {
			venueDetailMsg:{}
			}
		},
  onLoad(options) { 
	  // options 包含路由传递的所有参数
	// 1. 接收参数（options.参数名 对应传递时的 key）
	console.log(options.queryObj);
	const jsonStr = decodeURIComponent(options.queryObj);
	
	// 2. 反序列化还原为 JSON 对象
	this.venueDetailMsg = JSON.parse(jsonStr);
	
	// 3. 验证结果（可根据实际需求处理）
	console.log("接收的 JSON 对象：", this.venueDetailMsg);

	},
  methods: {
    closedQrcode() {
		uni.switchTab({
		url: '/pages/mine/mine'
	  });
		// uni.navigateTo({
		// 	url: '/other_pages/myActivities/myActivities'
		// })
	},
    goBack() {
      uni.navigateBack();
    },

     /**
         * 核心：保存2个二维码图片到本地
         */
        async saveAllQrcodes() {
          try {
            // 1. 先检查保存图片权限
            const hasPermission = await this.checkSavePermission();
            if (!hasPermission) {
              uni.showToast({ title: '请允许保存图片到相册', icon: 'none' });
              return;
            }
    
            // 2. 获取2个二维码的图片路径（本地图片直接写路径，网络图片需用实际url）
            const qrcodePaths = [
              '/static/index/vipCard.png',  // 微信二维码路径
              '/static/index/vipCard.png'   // QQ二维码路径
            ];
    
            // 3. 循环保存每个二维码
            for (let i = 0; i < qrcodePaths.length; i++) {
              const path = qrcodePaths[i];
              let filePath = path;
    
              // 若为网络图片（以http/https开头），需先下载到本地
              if (path.startsWith('http')) {
                const downloadRes = await this.downloadImage(path);
                filePath = downloadRes.tempFilePath; // 本地临时文件路径
              }
    
              // 4. 保存图片到相册
              await this.saveImageToAlbum(filePath, i === 0 ? '微信二维码' : 'QQ二维码');
            }
    
            // 5. 所有图片保存完成提示
            uni.showToast({ title: '2个二维码已全部保存', icon: 'success' });
    
          } catch (err) {
            console.error('保存图片失败：', err);
            uni.showToast({ title: '保存失败：' + err.message, icon: 'none' });
          }
        },
    
        /**
         * 检查保存图片到相册的权限
         */
        checkSavePermission() {
          return new Promise((resolve) => {
            uni.getSetting({
              success: (res) => {
                // 已授权：直接返回true
                if (res.authSetting['scope.writePhotosAlbum']) {
                  resolve(true);
                } else {
                  // 未授权：请求授权
                  uni.authorize({
                    scope: 'scope.writePhotosAlbum',
                    success: () => resolve(true),
                    fail: () => {
                      // 用户拒绝授权：引导去设置页开启
                      uni.showModal({
                        title: '权限申请',
                        content: '需要授权才能保存图片到相册',
                        confirmText: '去设置',
                        success: (modalRes) => {
                          if (modalRes.confirm) {
                            uni.openSetting({
                              success: (settingRes) => {
                                resolve(settingRes.authSetting['scope.writePhotosAlbum']);
                              }
                            });
                          } else {
                            resolve(false);
                          }
                        }
                      });
                    }
                  });
                }
              }
            });
          });
        },
    
        /**
         * 下载网络图片到本地（本地图片无需调用）
         */
        downloadImage(url) {
          return new Promise((resolve, reject) => {
            uni.downloadFile({
              url: url,
              success: (res) => {
                // 下载成功（状态码200）
                if (res.statusCode === 200) {
                  resolve(res);
                } else {
                  reject(new Error(`图片下载失败，状态码：${res.statusCode}`));
                }
              },
              fail: (err) => {
                reject(new Error(`下载接口调用失败：${err.errMsg}`));
              }
            });
          });
        },
    
        /**
         * 保存图片到相册
         */
        saveImageToAlbum(filePath, qrcodeName) {
          return new Promise((resolve, reject) => {
            uni.saveImageToPhotosAlbum({
              filePath: filePath,
              success: () => {
                // 单个图片保存成功提示（可选，避免多次弹窗可注释）
                // uni.showToast({ title: `${qrcodeName}保存成功`, icon: 'success', duration: 800 });
                resolve();
              },
              fail: (err) => {
                reject(new Error(`${qrcodeName}保存失败：${err.errMsg}`));
              }
            });
          });
        }
      }

};
</script>
<style scoped>
.qrcode-page {
  background-color: #fff;
  min-height: 100vh;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 24rpx;
  border-bottom: 1px solid #eee;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
}

.content {
  padding: 24rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}

.avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 12rpx;
}

.username {
  font-size: 28rpx;
}

.qrcode-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 32rpx;
}

.qrcode-img {
  width: 300rpx;
  height: 300rpx;
  margin-bottom: 12rpx;
}

.qrcode-label {
  font-size: 28rpx;
  margin-bottom: 8rpx;
}

.group-info {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 4rpx;
}

.save-btn {
	flex: 1; /* 均分宽度（两个按钮各占50%） */
	  height: 80rpx; /* 固定高度，保证按钮一致性 */
	  background-color: #007aff; /* 主色，突出保存功能 */
	  color: #fff;
	  border-radius: 40rpx; /* 圆角，提升视觉友好度 */
	  font-size: 28rpx;
}
.close-btn {
	flex: 1; /* 均分宽度 */
	  height: 80rpx;
	  background-color: #f5f5f5; /* 浅色背景，与主按钮区分 */
	  color: #333; /* 深色文字，保证可读性 */
	  border-radius: 40rpx;
	  font-size: 28rpx;
}
.btn-item {
	display: flex;
	gap: 20rpx; /* 两个按钮之间的间距（推荐用gap，比margin更灵活） */
	left: 40rpx;
	right: 40rpx;
}
</style>